<template>

<div class="newsInfo_box">

<!-- 标题 -->
<h3>{{newsinfo.title}}</h3>
<p class="time_click">
<!-- 时间 -->
<span>时间: {{newsinfo.add_time | timeFormat}}</span>	
<!-- 点击次数 -->
<span>点击次数: {{newsinfo.click}}</span>	
</p>
<!-- 内容 -->
<div class="content" v-html="newsinfo.content">
	
</div>
<!-- 评论子组件区域 -->
<comment :id="id"></comment>

</div>
</template>

<script>
import { Toast } from "mint-ui";

// 评论子组件引入
import comment from "../myModules/comment.vue";

export default {
  data() {
    return {
      id: this.$route.params.id,
      newsinfo: []
    };
  },
  created() {
    this.getInfo();
  },
  components: {
    // 评论子组件挂载
    comment
  },
  methods: {
    getInfo() {
      console.log(this.id);
      this.$http.get("api/getnew/" + this.id).then(res => {
        if (res.body.status === 0) {
          // console.log(res.body);
          this.newsinfo = res.body.message[0];
        } else {
          Toast("新闻详情加载失败");
        }
      });
    }
  }
};
</script>

<style lang="less">
/* 不使用scoped是因为添加scoped后对于v-html中的内容不起作用 */
.newsInfo_box {
  h3 {
    margin: 10px 0;
    text-align: center;
    font-size: 16px;
    color: #ff5555;
  }
  .time_click {
    padding: 0 5px;
    display: flex;
    // 两端最起
    justify-content: space-between;
    font-size: 12px;
    color: #26a2ff;
  }
  .content {
    padding: 0 5px;
  }
}
</style>